<template>
    <div class="bg"> 
    <div class="top_nav">
      <img @click="returnTap"
        class="return_icon"
        src="../../../static/images/me/more.jpg"
        alt=""
      />
      <span class="nav_title">个人头像</span>
      <img class="btn" src="../../../static/images/me/dot.png" alt="" @click="btnEvent">
    </div>
    <div class="content">
     <img  :src="imgUrl?imgUrl:'../../../static/images/me/headimg.png'" alt="">
    </div>
    <div class="bottom_choice" v-if="isshow">从相册选择</div>
    <input type="file" class="bottom_choice input_img" accept="image/*" v-if="isshow" @change="getImg($event)">
    <div class="bottom_close" v-if="isshow" @click="btnEvent">取消</div>
    <span class="finish_btn" v-if="isgetimg"> 完成</span>
    <span class="close_btn" v-if="isgetimg && !isshow">取消</span>
    <img  class="rotate_icon" v-if="isgetimg" src="../../../static/images/me/rotate.png" alt="">

    </div>
</template>
<script>
export default{
    data(){
        return{
          isshow:false,
          isgetimg:false,
          imgUrl:''
        }
    },
    methods:{
    returnTap(){
          this.$router.go(-1)
      },
      btnEvent(){
          this.isshow = !this.isshow
          this.isgetimg = !this.isgetimg
          console.log('hahah ')
      },
      getImg(event){
          let that = this
          this.isshow = false
          this.isgetimg = true
        console.log('hahhaah',event)
        let files = event.target.files[0];
        console.log(files)
         //创建读取文件的对象
            var file = new FileReader();//文件读取
            //分析文件对象
            file.readAsDataURL(files);
            //文件加载成功

            file.onload = function(e){
                console.log(this.result); /*获取bese路径*/
                if(/image/.test(this.result)){   //或者 e.targin.result
                   
                 that.imgUrl    = this.result;
                    
                   
                }
            }
      },  
    }
}
</script>
<style  scoped>
.bg{
    position: relative;
  background: #000;
  width: 100vw;
  height: 100vh;
}
.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 25px;
}
.return_icon {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}
.btn {
width: 25px;
height: 25px;
}
.nav_title{
    color: cornsilk;
}
.content{
  position: absolute;
  top: 20%;
 
  padding: 0 20px;
  max-height: 80%;
  overflow: hidden;
}
.content img{
    width: 100%;
    height: 100%;
}
.bottom_close{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: floralwhite;
}
.bottom_choice{
    position: fixed;
    bottom: 55px;
    right: 0;
    width: 100%;
    height: 50px;
     line-height: 50px;
    text-align: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
     background: floralwhite;
}
.input_img{
    opacity: 0;
    z-index: 10;
}
.finish_btn{
position: fixed;
right: 20px;
bottom: 20px;
color: floralwhite;
}
.close_btn{
position: fixed;
left: 20px;
bottom: 20px;
color: floralwhite;
}
.rotate_icon{
    position: fixed;
    left: 20px;
    bottom: 80px;
    width: 25px;
    height: 25px;
}
</style>

